<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    append-to-body
    :wrapper-closable="false"
  >
    <el-form :ref="refName" label-position="top" :model="model" :rules="rules" class="updateForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="关键词:" prop="keyword">
            <el-input v-model="model.keyword" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="进度:" prop="schedule">
            <el-input-number v-model="model.schedule" :disabled="disableSubmit" controls-position="right" :min="0" :max="1000000" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间:" prop="startTime">
            <el-date-picker v-model="model.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :disabled="disableSubmit" placeholder="选择日期时间" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间:" prop="endTime">
            <el-date-picker v-model="model.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :disabled="disableSubmit" placeholder="选择日期时间" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="上限:" prop="upperLimit">
            <el-input-number v-model="model.upperLimit" :disabled="disableSubmit" controls-position="right" :min="1" :max="1000000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注1:" prop="remark1">
            <el-input v-model="model.remark1" type="textarea" rows="3" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注2:" prop="remark2">
            <el-input v-model="model.remark2" type="textarea" rows="3" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注3:" prop="remark3">
            <el-input v-model="model.remark3" type="textarea" rows="3" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注4:" prop="remark4">
            <el-input v-model="model.remark4" type="textarea" rows="3" :disabled="disableSubmit" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!disableSubmit" class="drawer-footer">
      <div class="drawer-footer-btn">
        <el-button @click="modelClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { postAction } from '@/api/manage'

export default {
  components: {
  },
  props: {},
  data() {
    return {
      model: {},
      refName: 'ruleForm',
      visible: false,
      disableSubmit: false,
      userInfo: this.$ls.get('USER_INFO') || {},
      updateState: '',
      title: '',
      fid: '',
      size: '50%',
      rules: {
        keyword: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        column2: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      url: {
        update: 'subTable.aspx?action=Update'
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    add(fid) {
      this.updateState = 'add'
      this.visible = true
      this.model = {
        fid,
        schedule: 0,
        startTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        endTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      }
      this.$nextTick(() => {
        this.$refs[this.refName]?.clearValidate()
      })
      console.log('this.model', this.model)
    },
    edit(rowData) {
      this.updateState = 'edit'
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.model = {}
      this.model = JSON.parse(JSON.stringify(rowData))
    },
    submitForm() {
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          this.$store.dispatch('app/setLoading', true)
          postAction(this.url.update, this.model).then((res) => {
            if (res.code === 1) {
              this.modelClose()
              this.$message.success(res.message || '操作成功！')
              this.$emit('ok')
            } else {
              this.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 20px 30px 0;
  margin-bottom: 90px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
  .el-input-number{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
}
.el-col{
  padding: 0 8px;
}
.drawer-footer{
  position:absolute;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:65px;
  background:#fff;
  z-index:999;
  padding: 16px 29px;
  box-shadow: 0px -1px 16px 1px rgba(0,0,0,0.08);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}
::v-deep .el-drawer__body {
    overflow: auto;
}
</style>
